<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./weather.css">
	</head>
	<body  style="margin: 0;">
		<div id="app">
			<canvas id="canvas_3" style="background-color: #000;position:absolute;z-index:-2;" v-show="bbao&&snow"></canvas>
			<canvas id="canvas_1" style="position: absolute; height: 100%; width:100%;z-index:-2;" v-show="bbao&&rain"></canvas>
			<canvas id="canvas_2" style="background-color: rgb(236, 99, 25);position: absolute; height: 100%; width:100%;z-index:-2;" v-show="bbao&&ri"></canvas>
			<div class="search">
				<input v-model="city" @keyup.enter="searchWeather" type="text" class="content" placeholder="请输入查阅的天气" />
				<input type="button" value="搜索" class="btn" @click="searchWeather"/>
			</div>
			<ul>
				<li v-if="bbao">
					{{weath[1].day}}
					<br>{{weath[1].narrative}}
					<br>最高温:{{weath[1].tem1}}
					<br>最低温:{{weath[1].tem2}}
				</li>
			</ul> 
		</div>  
		<script src="./vue.js"></script>
		<script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
		<script src="./snow.js" defer></script>
		<script src="rain.js" defer></script>
		<script src="ri.js" defer></script>
	</body>
</html>
<script>
	var item=new Vue({
	el:"#app",
	data:{
		city:"",
		weath:[],
		bbao:false,
		snow:false,
		rain:false,
		ri:false
	},
	methods:{
		searchWeather:function(){
			var that=this;
			axios.get("https://v0.yiketianqi.com/api?unescape=1&version=v91&appid=43656176&appsecret=I42og6Lm&ext=&cityid=&city="+this.city)
			.then(function(response){
				that.bbao=true;
				console.log(response);
				that.weath = response.data.data;
				if(that.weath[1].narrative.includes("雪")){
					that.snow=true;
				}else if(that.weath[1].narrative.includes("雨")){
					that.rain=true;
				}else if(that.weath[1].narrative.includes("晴")){
					that.ri=true;
				}
				
			})
			.catch(function(err){})
		},
		panduan:function(){
			return true
		}
	}
})
</script>